打造 Progressive Web App 必須建立許多核心技術，包括 Service Workers 和 Web App Manifests 並搭配 Cache Storage API, IndexedDB 和 Push Notifications 等等，於是 Chrome DevTools 新增 Application 面板，讓開發者能夠更輕鬆檢查或管理這些技術的資訊。

打開 Chrome devTools 點選 Application tab，就可以檢查和管理 Application 、 Storage 、 Cache 等資訊

Application 裡面有:

• Manifest
• Service Workers
• Clear storage

Manifest

點選下圖左側的 Manifest 項目，我們可以看到右側顯示 manifest.json 文件的相關資訊，包括應用程式名稱、起始 URL、圖示等。

而下圖右側有一個 Add to homescreen 的按鈕，點擊後你可以模擬將網站添加到行動裝置主屏幕的體驗。

Service Workers

點選 Service Workers 項目，右側有一排複選框，分別介紹如下：

• Offline
  • 可以模擬無網路連線的環境。
  • 通常我們會拿來測試 Service Workers 『離線瀏覽網站』的需求是否成功。
• Update on reload
  • 如果開發者更新 service-worker.js，則新的 Service Workers 將會直接取代原本的 Service Workers。
• Bypass for network
  • 強迫瀏覽器忽略 Service Workers，直接從 network 獲取資源。
  • 如果你擔心 Service Worker 的快取將會返回舊的資源，則可以勾選這個項目，避免顯示舊的內容。
• Show all
  • 顯示所有 Service Workers 的名單 //todo

如果當前有 Service Workers，則在 Offline、Update on reload...這一排複選框的下方會顯示 Service Workers 相關資訊，例如： Status 提供 Service Workers 的當前狀態，如果有成功執行 install 和 activate 的事件，則會顯示綠色的圓形圖示代表一切運作正常。

self.addEventListener('install', function(event) {
  console.log('Service Worker installing.');
});

self.addEventListener('activate', function(event) {
  console.log('Service Worker activating.');  
});

下圖為有 2 個 Service Workers 的情形，#23257 是新的 Service Worker，目前處於等待狀態。

當我們在修改 service-worker.js 檔案的時候，我們要怎麼搭配 Chrome devTools 做使用？

情境如下：
當我們要更新 service-worker.js 檔案之前，打開 DevTools Application 面板，點選 Service Workers，將右側的 Update on reload 複選框打勾，如此一來就不需要點選 skipWaiting 選項，就可以確保當前 Service Worker 是最新的。

重新整理頁面之後，會發現如下圖的 Error，但其實只是警告你舊的 Service Workers 將會強制更新。

Cache

查看 Cache

點選 Cache Storage 內的 Cache ID，即可查看 Cache 資訊：

可以在 Cache ID 上方點擊右鍵後選擇刪除 Cache

進入 Clear storage，你可以一次勾選想要清除的資料，就能夠直接刪除對應的資源，像是 Service Workers，Local Storage, Session Storage, IndexedDB, Web SQL, Cookies, 和 Application Cache 等等。

今日小結

本篇介紹使用 Chrome devTools 去操作並檢視 Manifest、Service Worker 、 Cache 的資訊。

參考文件

• Debugging Service Workers

本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝